

// React Component 

import MyComponents from "../components/index.jsx"
import RouterIndex from "../route/index.js"

// JSX
class MyApp extends React.Component{
    render(){
        return (
            <div>
                <h2>Hello React </h2>
                <hr/>
                <RouterIndex></RouterIndex>
                {/* <MyComponents></MyComponents> */}
                {/* <MyDemo></MyDemo> */}
            </div>
        )
    }
}

class MyDemo extends React.Component{
    render(){
        return (
            <div>
                <h2>自定义 React 组件 - MyDemo - MyDemo </h2>
                <MyTips></MyTips>
            </div>
        )
    }
}

class MyTips  extends Component{
    render(){
        return (
            <div>
                <h2>MyTips - MyTips - WH2217 daydayup </h2>
                <MyList></MyList>
            </div>
        )
    }
}

class MyList extends Component{
    render(){
        return (
            <div>
                <h2>class 类组件 </h2>
                <h2>JSX 语法 书写 React 组件 = (javascript xml) </h2>
                <h3>(把存储在javascripts 内存中描述DOM节点的数据 叫做 虚拟DOM ) </h3>
                <h3>diff 算法 </h3>
                <h3>fiber 机制</h3>
                <hr/>

                <MyTodo></MyTodo>
            </div>
        )
    }
}

function MyTodo(){
    return (
        <div>
            <h2>Function  纯函数组件   </h2>
            <h3>以后开发全部使用纯组件  </h3>
        </div>
    )
}

export default MyApp;